<template>
  <el-row :gutter="2">
    <el-col :span="4">
      <el-input
        @input="inputName"
        :value="productName"
        placeholder="产品名称"
      />
    </el-col>
    <el-col :span="4">
      <el-input
        @input="inputNumber"
        :value="productNumber"
        placeholder="产品编号"
      />
    </el-col>
    <el-col :span="3">
      <el-select v-model="selectValue" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.typeName"
          :value="item.typeName"
        >
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="4">
      <el-select v-model="stateValue" clearable placeholder="选择状态">
        <el-option
          v-for="item in selectState"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="1.5">
      <el-button type="primary" @click="checkPorcelainList">查询</el-button>
    </el-col>
    <el-col :span="1.5">
      <EButton
        :title="'添加'"
        :color="'info'"
        @onMessagePro="productMessage($event)"
      />
    </el-col>
    <el-col :span="1">
      <EButton
        :title="'分享全部'"
        :color="'info'"
        @onMessageSha="shareMessage($event)"
      />
    </el-col>
  </el-row>
</template>

<script>
/* eslint-disable */
import EButton from "@/components/ButtonBox/index";
export default {
  name: "Index",
  components: {
    EButton,
  },
  data() {
    return {
      productName: "",
      productNumber: "",
      selectValue: "",
      selectState: [
        {
          value: "0",
          label: "审核中",
        },
        {
          value: "1",
          label: "已通过",
        },
        {
          value: "-1",
          label: "未通过",
        },
      ],
      stateValue: "",
    };
  },
  props: {
    options: {
      type: Array,
      default: [],
    },
  },
  methods: {
    productMessage(e) {
      this.$emit("addProduct", e);
    },
    shareMessage(e) {
      this.$emit("share", e);
    },
    inputName(val) {
      this.productName = val.trim();
    },
    inputNumber(val) {
      this.productNumber = val.trim();
    },
    checkPorcelainList() {
      let data = {
        porcelainCode: this.productNumber,
        porcelainName: this.productName,
        porcelainType: this.selectValue,
        status: this.stateValue,
        userCode: localStorage.getItem('uname'),
      };
      this.$emit("checkPorcelainList", data);
    },
  },
};
</script>

<style scoped></style>
